<template>
    <div>
        <h3>房型信息修改</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text" v-model="query.houseName">
                    </td>
                </tr>
                <tr>
                    <td>单价</td>
                    <td>
                        <input type="text" v-model="query.money">
                    </td>
                </tr>
                <tr>
                    <td>室内面积</td>
                    <td>
                        <input type="text" v-model="query.mianJi">
                    </td>
                </tr>
                <tr>
                    <td>最多入住人数</td>
                    <td>
                        <input type="text" v-model="query.count">
                    </td>
                </tr>
                <tr>
                    <td>图片上传</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="query.img" alt="" width="100" height="100" v-if="query.img!=''">
                    </td>
                </tr>
                <tr>
                    <td>房型描述</td>
                    <td>
                       <textarea cols="50" rows="5" v-model="query.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>是否有窗</td>
                    <td>
                       <input type="radio" name="iswindow" value="1" v-model="query.isWindow">有窗
                       <input type="radio" name="iswindow" value="0" v-model="query.isWindow">无窗
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    fantian();
})
const fantian=()=>{
   axios({
        method:'get',
        url:'/api/HouseType/GetHouseType',
        params:{
            id:Route.query.id},
   })
   .then(res=>{
    console.log(res);
    Object.assign(query,res.data);
   })
   .catch(err=>{
    console.log(err);
   })
}
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/Img/UpFile',
        data:f,
    })
    .then(res=>{
        console.log(res);
        query.img=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
const query=reactive({
    "id":Route.query.id,
  "houseName": "",
  "money": '',
  "mianJi": '',
  "count": '',
  "img": "",
  "desc": "",
  "isWindow": '',

})
const ok=()=>{
    if(query.houseName==''){
        alert("房型名称不能为空");
        return;
    }
    if(query.money==''){
        alert("单价不能为空");
        return;
    }
    if(query.mianJi==''){
        alert("室内面积不能为空");
        return;
    }
    if(query.count==''){
        alert("最多入住人数不能为空");
        return;
    }
    if(query.img==''){
        alert("图片不能为空");
        return;
    }
    if(query.desc==''){
        alert("房型描述不能为空");
        return;
    }
    axios({
        method:'put',
        url:'/api/HouseType/HouseTypeUpd',
        data:query,
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("修改成功");
            Router.push('/houseTypeShow');
         
        }
        else{
            alert("修改失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>